<template>
	<div class="mobile_login_page mobile_layer">
		<div class="logo_box">
			<img src="@/assets/logo.png" class="logo" />
			<i class="el-icon-close" @click="handleBack()"></i>
		</div>
		<div class="h1">
			{{$t('login.signIn')}}
		</div>
		<div class="from_box">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
				<el-form-item prop="account">
					<el-input v-model="ruleForm.account" :placeholder="$t('login.emailPhone')"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="ruleForm.password" :placeholder="$t('login.loginPassword')" show-password></el-input>
				</el-form-item>
				<div class="forgot" @click="handleForgot()">{{$t('login.forgotPassword')}}?</div>
				<el-button class="but" @click="hanldeLogin()">{{$t('login.signIn')}}</el-button>
				<div class="creat_acc">
					{{$t('login.noAccount')}}？ <span @click="handleReg()">{{$t('login.createAccount')}}</span>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		userLogin
	} from '@/api/home'
	export default {
		components: {},
		data() {
			return {
				ruleForm: {
					account: '',
					password: '',
				},
				// rules: {
					
				// }
			}
		},
		computed: {
			rules(){
				return {
					account: [{
						required: true,
						message: this.$t('login.emailValidate'),
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: this.$t('login.passwordValidate'),
						trigger: 'change'
					}]
				}
			}
		},
		watch: {},
		mounted() {},
		methods: {
			handleBack() {
				if(window.history.length  > 1){
					this.$router.go(-1)
				}else {
					this.$router.replace('/')
				}
			},
			handleReg() {
				this.$router.replace('/mobile/register')
			},
			handleForgot(){
				this.$router.replace('/mobile/resetPassword')
			},
			hanldeLogin() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						const res = await userLogin({
							...this.ruleForm
						})
						console.log('res', res);
						if (res && res.code == 1) {
							this.$store.commit('onChangeUserInfo', res.data)
							this.$store.dispatch('getBalance')
							this.$router.replace('/')
							this.$message.success(res.msg)
						} else {
							this.$message.error(res.msg)
						}
					}
				});
			}
		}
	}
</script>
<style lang="less" scoped>
	.mobile_login_page {
		position: relative;
		padding-top: 10px;
		background: url('~@/assets/images/login/bg.png') no-repeat;
		background-size: cover;
		background-position: left top;
		height: 100vh;

		.logo_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40px;

			.logo {
				width: 24px;
			}

			i {
				font-size: 20px;
			}
		}

		.h1 {
			font-family: PingFang SC;
			font-size: 20px;
			margin-bottom: 40px;
			text-align: left;
		}

		.from_box {
			::v-deep .el-input__inner {
				background-color: #12171D;
				border: 0;
				border-radius: 10px;
				color: #fff;
			}

			.forgot {
				text-align: right;
				font-size: 14px;
				color: #999;
				margin-bottom: 40px;
			}

			.but {
				width: 100%;
				height: 46px;
				padding: 15px;
				background-color: #137EFE;
				border: 0;
				border-radius: 10px;
				color: #fff;
				font-size: 16px;
				margin-bottom: 30px;
			}

			.creat_acc {
				font-size: 14px;
				color: #999;
				text-align: center;

				span {
					color: #137EFE;
					margin-left: 5px;
				}
			}
		}
	}
</style>